<template>
  <div class="home container">
    <div id="load">
      <div class="load_img">
        <!-- 加载动画 -->
        <img class="jzxz1" src="../assets/img/jzxz2.png" />
        <img class="jzxz2" src="../assets/img/jzxz1.png" />
      </div>
    </div>
    <!-- <div class="canvas" style="opacity: .2">
      <iframe frameborder="0" src="../../static/lib/index.html" style="width: 100%; height: 100%"></iframe>
    </div> -->
    <el-container>
      <el-header class="header">
        <div class="content">
          <div class="headerleft">
            <div class="timer">
              <span>{{ companyText }}</span>
              <!-- <span style="padding: 0 0.08rem 0 0rem">{{companyText}}</span> -->
              <!-- <span class="concea">|</span> -->
              <span class="concea" style="padding-left: 0.08rem">{{ adress }}</span>
              <a target="_blank"
                href="http://sx.ypt.klims.cn:1521/External/Login/FF16EEFD6814CD51D1771801343930C3D37C6F22E670F24E/304383512073999117F7AFBE655D5634/AUTH"
                style="display:flex;">
                <img src="../assets/img/bigscreen.png" style="width:18px;height:16px" alt="">
                云平台
              </a>
            </div>
          </div>
          <div class="headercenter">
            <div class="headerContent">
              <div class="logo">
                <img src="../assets/img/logo.png" alt="">
              </div>
              <div class="title">在建工程项目试验检测质量可视化监管平台</div>
            </div>
          </div>
          <div class="headerright">
            <div class="weathers">
              <span>{{ getData }}</span>
              <span style="padding: 0 0.08rem">{{ week }}</span>
              <span>{{ weatherName }}</span>
              <span style="padding: 0 0.07rem 0 0.12rem">|</span>
              <div>
                <img style="width:0.3rem;margin-top:-0.04rem" :src="img" alt />
              </div>
              <span style="padding-right: 0.1rem">{{ tian }}</span>
              <span>{{ temperature }}</span>
            </div>
          </div>
        </div>
      </el-header>
      <!-- <el-header class="header">
        <div class="content">

          <div class="headerleft">
            <div class="logo">
              <img src="../assets/img/logo.png" alt="">
            </div>
            <div class="title">在建工程项目试验检测质量可视化监管平台</div>

          </div>

          <div class="headerright">
            <div class="select">
              <el-select v-model="mineStatus" placeholder="请选择" clearable>
                <el-option :value="data">
                  <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick">
                  </el-tree>
                </el-option>
              </el-select>
              <div class="time">
                <el-date-picker v-model="value1" type="daterange" range-separator="至" start-placeholder="开始日期"
                  end-placeholder="结束日期">
                </el-date-picker>
              </div>


            </div>
            <div class="baseInfo">
              <div class="company">{{ company }}</div>
              <div class="date">
                <div class="Minutes">
                  {{ getMinutes }}
                </div>
                <div class="year">
                  {{ getData }}
                </div>

              </div>
            </div>

          </div>
        </div>
      </el-header> -->


      <!-- <div class="weathers">
              <span>{{ getData }}</span>
              <span style="padding: 0 0.08rem">{{ week }}</span>
              <span>{{ weatherName }}</span>
              <span style="padding: 0 0.07rem 0 0.12rem">|</span>
              <div>
                <img style="width:0.3rem;margin-top:-0.04rem" :src="img" alt />
              </div>
              <span style="padding-right: 0.1rem">{{ tian }}</span>
              <span>{{ temperature }}</span>
            </div> -->
      <el-main class="main" :style="contentStyleObj">

        <router-view></router-view>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      weatherName: "",
      companyText: "中交一公局第三工程有限公司",
      adress: "中国•北京",//地址
      img: "",
      temperature: "",
      weatherData: {},
      contentStyleObj: {
        height: "",
      },
      week: "",
      citys: "",
      // 年月日
      getData: "",
      // 时分秒
      getMinutes: "",
      tian: "",

      mineStatus: "",
      data: [{
        label: '一级 1',
        children: [{
          label: '二级 1-1',
          children: [{
            label: '三级 1-1-1'
          }]
        }]
      }, {
        label: '一级 2',
        children: [{
          label: '二级 2-1',
          children: [{
            label: '三级 2-1-1'
          }]
        }, {
          label: '二级 2-2',
          children: [{
            label: '三级 2-2-1'
          }]
        }]
      }, {
        label: '一级 3',
        children: [{
          label: '二级 3-1',
          children: [{
            label: '三级 3-1-1'
          }]
        }, {
          label: '二级 3-2',
          children: [{
            label: '三级 3-2-1'
          }]
        }]
      }],
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      value1: '',//时间
      company: "中交一公局第三工程有限公司"
    };
  },
  created() {
    this.getHeight();

    window.addEventListener("resize", this.getHeight);
    this.getHeight();
  },
  mounted() {
    var that = this;
    this.getTime();
    setInterval(() => {
      that.getTime();
    }, 1000);
    this.getWeather();
    //删除加载动画
    $("#load").fadeOut(4900);
    setTimeout(function () {
      $("#load").remove();
    }, 5000);
  },
  destroyed() {
    window.removeEventListener("resize", this.getHeight);
    this.getHeight();
  },
  methods: {
    // 选择当前节点时，elselect组件显示所选节点信息
    handleNodeClick(e) {
      console.log(e)
      // let res = this.$refs.tree.getCurrentNode();
      this.mineStatus = e.label;
    },
    getWeather() {
      var that = this;
      AMap.plugin("AMap.CitySearch", function () {
        var citySearch = new AMap.CitySearch();
        citySearch.getLocalCity(function (status, result) {
          // console.log(status, result)
          // result.province result.city
          // result.province.replace(/"/g,"省");
          // console.log(result.province.replace(/省/g, ""));
          // that.adress = result.province.replace(/省/g, "") + "•" + result.city.replace(/市/g, "")
          // 查询成功，result即为当前所在城市信息
          if (status === "complete" && result.info === "OK") {

            that.getW(result.city);
          } else {
            console.log("定位城市失败");
          }
        });
      });
    },
    getW(datas) {
      var that = this;
      AMap.plugin("AMap.Weather", function () {
        var weather = new AMap.Weather();
        //查询实时天气信息, 查询的城市到行政级别的城市，如朝阳区、杭州市
        weather.getLive(datas, function (err, data) {
          if (!err) {
            that.weatherName = data.city.replace("市", "");
            that.tian = data.weather;
            if (data.weather == "多云") {
              that.img = require("../assets/weather/cloudy.png");
            } else if (data.weather == "晴") {
              that.img = require("../assets/weather/sunny.png");
            } else if (data.weather == "阴") {
              that.img = require("../assets/weather/overcast.png");
            } else if (data.weather == "小雨") {
              //
              that.img = require("../assets/weather/lightrain.png");
            } else if (data.weather == "阵雪") {
              that.img = require("../assets/weather/snowshower.png");
            } else if (data.weather == "大雨") {
              //
              that.img = require("../assets/weather/Heavyrain.png");
            } else if (data.eather == "中雨") {
              that.img = require("../assets/weather/Moderaterain.png");
            } else if (data.eather == "暴雨") {
              //
              that.img = require("../assets/weather/torrentialrain.png");
            } else if (data.eather == "大暴雨") {
              //
              that.img = require("../assets/weather/Bigtorrentialrain.png");
            } else if (data.eather == "特大暴雨") {
              //
              that.img = require("../assets/weather/Rainstormlargerainstorm.png");
            } else if (data.eather == "雷阵雨") {
              that.img = require("../assets/weather/thunderstorm.png");
            } else if (data.weather == "阵雨") {
              that.img = require("../assets/weather/rainShower.png");
            } else if (data.weather == "'雨夹雪") {
              that.img = require("../assets/weather/sleet.png");
            } else if (data.weather == "小雪") {
              that.img = require("../assets/weather/snowlightly.png");
            } else if (data.weather == "中雪") {
              that.img = require("../assets/weather/moderatesnow.png");
            } else if (data.weather == "大雪") {
              that.img = require("../assets/weather/GreatSnow.png");
            } else if (data.weather == "雾") {
              that.img = require("../assets/weather/fog.png");
            } else if (data.weather == "霾") {
              that.img = require("../assets/weather/haze.png");
            } else {
              that.img = require("../assets/weather/cloudy.png");
            }
          }
        });

        weather.getForecast(datas, function (err, data) {
          if (err) {
            return;
          }
          var str = [];
          for (var i = 0, dayWeather; i < data.forecasts.length; i++) {
            dayWeather = data.forecasts[0];

            that.temperature =
              dayWeather.nightTemp + "~" + dayWeather.dayTemp + "℃";
          }
        });
      });
    },
    getHeight() {
      this.contentStyleObj.height = window.innerHeight - 70 + "px";
    },

    // 时间格式化
    getTime() {
      // this.roadMap();
      var a = ["日", "一", "二", "三", "四", "五", "六"];
      var weeker = new Date().getDay();
      this.week = "星期" + a[weeker];

      var time = new Date();
      const y = time.getFullYear();

      var m = time.getMonth() + 1 + "";
      m = (m < 10 ? "0" : "") + m;

      var d = time.getDate() + "";
      d = (d < 10 ? "0" : "") + d;

      var hh = time.getHours() + "";
      hh = (hh < 10 ? "0" : "") + hh;

      var mm = time.getMinutes() + "";
      mm = (mm < 10 ? "0" : "") + mm;

      var ss = time.getSeconds() + "";
      ss = (ss < 10 ? "0" : "") + ss;
      this.getData = `${y}/${m}/${d}`;

      this.getMinutes = `${hh}:${mm}:${ss}`;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scope>
.home {
  width: 100%;
  height: 100%;
  position: relative;

  overflow: hidden;

  #load {
    width: 100%;
    height: 100%;
    position: absolute;
    background: rgba(0, 2, 41, 1);
    top: 0;
    left: 0;
    z-index: 999;

    .load_img {
      position: absolute;
      left: calc(50% - 182px);
      top: calc(50% - 182px);

      img {
        position: absolute;
        left: 0;
        top: 0;
      }

      .jzxz1 {
        animation: xz1 8s infinite linear;
      }

      .jzxz2 {
        animation: xz2 7s infinite linear;
      }
    }
  }

  .el-container {
    width: 100%;
    height: 100%;
    background: rgba(0, 2, 41, 1);
    display: flex;
    flex-direction: column;

    .header {
      width: 100%;
      height: 0.7rem !important;
      padding: 0;
      margin: 0;
      background: url("../assets/img/tab.png") no-repeat;
      background-size: 100% 100%;


    }

    .header {
      width: 100%;
      height: 0.7rem !important;
      padding: 0;
      margin: 0;
      // border: 1px solid red;

      .content {
        position: relative;
        box-sizing: border-box;
        height: 0.7rem;
        line-height: 0.4rem;

        display: flex;
        padding: 0 0.14rem;

        .headerleft {
          width: 22.052083%;
          display: flex;
          line-height: 0.58rem;
          height: 0.58rem;
          letter-spacing: 0.01rem;
          // border: 1px solid red;

          .timer {
            flex: 1;
            font-size: 0.16rem;
            color: #e6feff;
            display: flex;

            a {
              margin-left: 0.25rem;
              display: flex;
              line-height: 0.58rem;
              align-items: center;

              img {
                margin-right: 0.1rem;
              }
            }

          }
        }

        .headercenter {
          // width: 45%;
          // width: 59.8954%;
          width:55.895834%;
          line-height: 0.6962rem;
          text-align: center;
          font-size: 0.28rem;
          background-image: -webkit-linear-gradient(bottom, #000, #f208b4);

          box-sizing: border-box;

          -webkit-background-clip: text;
          background-image: -ms-linear-gradient(bottom, #000, #f208b4);
          -ms-background-clip: text;
          -ms-text-fill-color: transparent;

          // background-image: -moz-linear-gradient(
          //   bottom,
          //   #81b2e9,
          //   #bbf4fc
          // ) !important;
          -moz-background-clip: text;
          -moz-text-fill-color: transparent;
          font-weight: 600;
          letter-spacing: 0.02rem;
          -webkit-text-fill-color: transparent;

          justify-content: center;

          // background: linear-gradient(to right, #4a95fe, #d6eefc);
          // -webkit-background-clip: text;
          // color: transparent;
          // animation: blink 2s linear infinite;
          // -webkit-animation: blink 2s linear infinite;
          // -moz-animation: blink 2s linear infinite;
          // -ms-animation: blink 2s linear infinite;
          // -o-animation: blink 2s linear infinite;
          display: flex;
          align-items: center;

          .headerContent {
            display: flex;
            width: 69%;
            height: 100%;

            justify-content: space-between;
            align-items: center;
            position: relative;

            .logo {
              position: absolute;
              left: 0;
              width: 1.2631rem;
              height: 0.4647rem;
              // width: 126.31px;
              // height: 46.47px;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .title {
              // display: block;
              // content: "在建工程项目试验检测质量可视化监管平台";
              position: absolute;
              height: 0.7rem;
              right: 0;

              box-sizing: border-box;
              line-height: 0.6962rem;
              text-align: center;
              font-size: 0.28rem;
              background-image: -webkit-linear-gradient(bottom, #f1f9fe, rgba(4, 186, 255, 1));
              -webkit-background-clip: text;
              background-image: -ms-linear-gradient(bottom, #f1f9fe, rgba(4, 186, 255, 1));
              -ms-background-clip: text;
              -ms-text-fill-color: transparent;
              -moz-background-clip: text;
              -moz-text-fill-color: transparent;
              font-weight: 600;
              letter-spacing: 0.03rem;
              -webkit-text-fill-color: transparent;

            }
          }


        }

        .headerright {
          // width: 32.5%;
          width: 22.052083%;
          line-height: 0.58rem;
          height: 0.58rem;
          display: flex;
          // margin-top: 0.13rem;
          line-height: 0.58rem;
          height: 0.58rem;
          letter-spacing: 0.01rem;

          .weathers {
            flex: 1;
            display: flex;
            color: #e6feff;
            font-size: 0.16rem;
            justify-content: flex-end;
            // border: 1px solid red;


            div {
              margin: 0 0.03rem;

              img {
                vertical-align: middle;
              }
            }
          }

          // .weather {
          //   flex: 1;
          //   font-size: 0.16rem;
          //   // line-height: 0.5rem;
          //   // padding-top: 0.06rem;
          //   display: flex;
          //   justify-content: center;
          //   align-items: center;
          //   >div {
          //   line-height: 0.5rem;

          //   }
          //   #weather {
          //     width: 100%;

          //     overflow: hidden;
          //   }
          // }
        }
      }
    }

    .main {
      padding: 0 0.09rem 0.13rem 0.14rem;
    }
  }
}

@keyframes xz1 {
  from {
    transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
  }

  50% {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes xz2 {
  from {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-180deg);
  }

  to {
    transform: rotate(-360deg);
  }
}

@keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.8;
  }
}

@-webkit-keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.8;
  }
}

@-moz-keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.8;
  }
}

@-ms-keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.8;
  }
}

@-o-keyframes blink {
  0% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    opacity: 0.8;
  }
}
</style>
